import { memo } from 'react';
import type { ReactNode, FC } from 'react';
import { ListHeaderV2Wrapper, HeaderLeft, HeaderRight } from './style';
import { Link } from 'react-router-dom';
interface IProps {
  children?: ReactNode;
  name: string;
  trackCount: string;
  count: number;
}

const CommonHeader: FC<IProps> = (props) => {
  const { name, trackCount, count } = props;
  return (
    <>
      <ListHeaderV2Wrapper>
        <HeaderLeft>
          <span className="title">{name}</span>
          <div className="item">{trackCount}</div>
        </HeaderLeft>
        <HeaderRight>
          {count != 0 && (
            <>
              <span>
                播放：<em>{count}</em>次
              </span>
            </>
          )}
        </HeaderRight>
      </ListHeaderV2Wrapper>
    </>
  );
};

export default memo(CommonHeader);
